<template>
  <div id="search-page">
    <div class="my-bg">
      <div class="head-search">
        <input type="text" placeholder="搜索音乐" @keyup.enter="goSearch()" v-model="keywords">
        <div class="search-btn"  @click="goSearch()" >
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
          </svg>
        </div>
      </div>
      <div class="hot_search">
        <label>热门搜索:</label>
        <span @click="hotSearch('周杰伦')">周杰伦</span>
        <span @click="hotSearch('陈奕迅')">陈奕迅</span>
        <span @click="hotSearch('光年之外')">光年之外</span>
      </div>
    </div>
    <div class="my-body">
      <div class="content">
<!--        <nav class="searchList-nav" ref="change">-->
<!--          <span :class="{isActive: toggle === 'Songs'}" @click="handleChangeView('Songs', 0)">歌曲</span>-->
<!--          <span :class="{isActive: toggle === 'SongLists'}" @click="handleChangeView('SongLists', 1)">歌单</span>-->
<!--        </nav>-->
        <div class="mysong_tab">
          <v-tabs slider-color="black" style="padding-top: 20px">
            <v-tab @click="changeView(1)" style="margin-left: 100px;">
              <svg-icon icon-class="gequ" size="30"></svg-icon>
              <span>歌曲</span>
            </v-tab>
            <v-tab @click="changeView(2)" style="margin-left: 100px;">
              <svg-icon icon-class="SongListgedan" size="40"></svg-icon>
              <span>歌单</span>
            </v-tab>
            <v-tab @click="changeView(3)" style="margin-left: 100px;">
              <svg-icon icon-class="geshou" size="40"></svg-icon>
              <span>歌手</span>
            </v-tab>
          </v-tabs>
        </div>
        <component :is="currentView"></component>
      </div>
    </div>
  </div>
</template>

<script>
import searchSongs from '../components/search/SearchSongs'
import searchSongLists from '../components/search/SearchSongLists'
import searchSingers from '../components/search/SearchSingers'
import { mapGetters } from 'vuex'
import {mixin} from '../mixins'


export default {
  name: 'search-page',
  data () {
    return {
      currentView: 'searchSongs',
      keywords: ''
    }
  },
  components: {
    searchSongs,
    searchSongLists,
    searchSingers
  },
  computed: {
    ...mapGetters([
      'searchword'
    ])
  },
  created() {
    this.changeView(1);
  },

  mixins: [mixin],
  methods: {
    // 切换组件
    handleChangeView: function (component) {
      this.currentView = 'search' + component
      this.toggle = component
    },
    goSearch () {
      this.$store.commit('setSearchword', this.keywords)

    },
    hotSearch(value) {
      this.$store.commit('setSearchword', value)
    },
    changeView(type) {

        // 1:歌曲组件  2:歌单组件  3:歌手组件
        if (type === 1) {
          this.currentView = 'search-songs'
        }else if (type === 2) {
          this.currentView = 'search-song-Lists'
        } else {
          this.currentView = 'search-singers'
        }

    }
  }
}
</script>

<style scoped>
  .my-bg {
    width: 100%;
    height: 250px;
    background-color: #93d2f8;
  }
  .my-body{
    position: relative;
    padding: 0 100px;
    padding-left: 12%;
    width: 75%;
  }
  .content {
    background-color: white;
    margin: 50px 0;
    border-radius: 12px;
    padding: 20px 40px;
    min-width: 900px;
  }
  .searchList-nav {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
    font-size: 1.5rem;
    color: black;
  }
  .searchList-nav span {
    line-height: 50px;
  }
  .isActive {
    font-weight: 600;
    border-bottom:5px solid black;
  }

  .head-search {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    padding-top: 100px;
    padding-left: 30%;
    width: 35%;
  }
  .head-search input {
    height: 40px;
    width: 400px;
    border: 0;
    text-indent: 10px;
    background-color: #ebeef0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  input:focus {
    outline: none;
  }
  .search-btn{
    background-color: #26a2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 40px;
    cursor: pointer;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .icon{
    width: 0.8em;
    height: 0.8em;
    fill: currentColor;
    color: white;
    font-size: 1.5em;
  }

  .hot_search{
    padding-left: 30%;
    padding-top: 30px;
    color: white;
    font-size: 20px;
  }
  .hot_search span {
    margin-left: 20px;
    cursor: pointer;
  }
  .hot_search span:hover{
    color: blue;
  }
</style>
